<template>
    <div>
        <el-dialog
                :title="$t('edit')"
            :visible="visibleEdit"
            class="el-dialog-sm"
            @close="closeModal">
            <el-form ref="form" :model="form" label-width="200px" >
                <el-row :gutter="24">
                    <el-col :span="20">
                        <el-form-item :label="$t('device-type')" prop="type" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.type" placeholder="" @change="changeType">
                                <el-option
                                    v-for="item in deviceTypeList"
                                    :key="item.value"
                                    :label="item.code"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('devWifi.deviceType')" prop="inverterType" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.inverterType" placeholder="">
                                <el-option
                                    v-for="item in typeData"
                                    :key="item.value"
                                    :label="item.code"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('device-sn-title')" prop="prefix" :rules="[{ required: form.type=='0'?true:false, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.prefix" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('device-installation-guide')" prop="file" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-col :span="15" style="padding:0">
                                <baseFile v-model="form.file" :placeholder="fileName"></baseFile>
                            </el-col>
                            <el-col :span="9">
                                <a class="preview showPDF" target="_blank" :href="href">{{$t('device-preview-pdf')}}</a>
                            </el-col>
                        </el-form-item>
                        <el-form-item :label="$t('installationGuide.title')" prop="guideFile" :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-col :span="15" style="padding:0">
                                <baseFile v-model="form.guideFile" :placeholder="guideFileName"></baseFile>
                            </el-col>
                            <el-col :span="9">
                                <a class="preview showPDF pointer" @click='downloadModal'>{{$t('device-preview-pdf')}}</a>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeModal">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import baseFile from '../../../components/common/baseFileInput'
export default {
    components:{
        baseFile
    },
    props: {
        deviceTypeList:'',
        typeDataObj:'',
        rowData:{}
    },
    data() {
        return {
            typeData:[],
            href:'',
            fileName:'',
            guideFileName:'',
            form:{
                id:'',
                type:'',
                inverterType:'',
                prefix:'',
                file:'222',
                guideFile:'',
            }
        };
    },
    computed: {
        visibleEdit(){
            return this.$store.state.sysStore.visibleEdit
        }
    },
    watch:{
        rowData:{
            handler(nv,ov){
                if(nv){
                    for(let key in this.form){
                        if(key=='type'||key=='inverterType'){
                            this.form[key]=nv[key].toString()
                            if(key=='type'){
                                this.changeType(nv['type'])
                            }
                        }else{
                            this.form[key]=nv[key]
                        }
                    }
                    this.form.file = ''
                    this.form.id = nv.sid
                    this.fileName=nv.instructionsPath.split("/").slice(-1)[0]
                    this.guideFileName=nv.guideDocPath?nv.guideDocPath.split("/").slice(-1)[0]:""
                    this.href=process.env.VUE_APP_DOWNLOAD_PROXY+'/snGuide/previewInstructionDoc?instructionsPath='+nv.instructionsPath+'&token='+sessionStorage.getItem('token')

                }
            }
        }
    },
    mounted(){
      
    },
    methods: {
        closeModal(){
            this.form.guideFile ='1'
            this.$store.commit('setVisibleEdit',false);
        },
        downloadModal(){
            this.comm.windowOpen(`/snGuide/previewSnGuideDoc?guideDocPath=${this.rowData.guideDocPath}`)
        },
        changeType(val){
            this.typeData=this.typeDataObj[val]
            this.form.inverterType=''
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            let res = await this.API.editGuide(this.form)
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.form.guideFile = ''
            this.$store.commit('setVisibleEdit',false)
            this.$emit('uploadPage',true)
        }
    }
};
</script>

<style  lang="less">
a.preview{
    font-size: 12px;
    white-space: nowrap;
}
</style>
